<template>
  <!-- 主容器 -->
  <div id="all" class="viewmiddle_3 dark_bgcolor2">
    <!-- 内容区域 -->
    <div id="nierong">
      <!-- 标题 -->
      <div>
        <h4>单封面</h4>
      </div>
      <!-- 描述文字 -->
      <el-text>一键生成抖音快手西瓜等封面，描述,弧度字体你来决定</el-text>
      <!-- 分割线 -->
      <div><el-divider /> </div>
      <!-- 视频平台封面比例选择 -->
      <div>
        <el-row :gutter="50">
          <el-col :span="12">
            <div>比例：16:9(西瓜视频)</div>
          </el-col>
          <el-col :span="12">
            <div>比例：3:4(抖音 快手)</div>
          </el-col>
        </el-row>
      </div>

      <!-- 图片上传区域 -->
      <div>
        <el-row :gutter="50">
          <el-col :span="12">
            <div class="margin_top10" style="height: 200px;">
              <el-upload 
                class="upload-demo"  
                drag 
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple>
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                 上传图片文件
                </div>
              </el-upload>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="margin_top10" style="height: 200px;">
              <el-upload 
                class="upload-demo"  
                drag 
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple>
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                 上传图片文件
                </div>
              </el-upload>
            </div>
          </el-col>
        </el-row>
      </div>

    </div>
  </div>
</template>

<script lang="ts" setup>
// 导入Vue的ref函数用于创建响应式数据
import { ref } from 'vue'
// 导入Element Plus的图标组件
import { UploadFilled } from '@element-plus/icons-vue'

// 创建两个响应式文本区域值
const textarea1 = ref('')
const textarea2 = ref('')
</script>

<style scoped>
/* 内容区域的样式 */
#nierong {
  padding: 20px 40px; /* 设置内边距 */
}

/* 主容器样式 */
.viewmiddle_3 {
  border-radius: 10px; /* 设置圆角 */
  margin-top: 50px; /* 设置上外边距 */
  width: 100%; /* 设置宽度为100% */
  height: 100; /* 设置高度 */
}

/* 文本输入框样式 */
.qsxtext {
  width: 100%; /* 设置宽度为100% */
  height: 230px; /* 设置高度 */
  margin-top: 10px; /* 设置上外边距 */
  resize: none; /* 禁止用户调整大小 */
}

/* 按钮悬停样式 */
.blbut:hover {
  background-color: rgb(192, 191, 189); /* 设置悬停时背景颜色 */
}
</style>